<template>
    <div style="width:100%;height: 1600px;">
        <el-form :model="condition">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="港口：">
                        <el-checkbox-group v-model="condition['search_IN_portCode']" @change="changeport">
                            <el-checkbox v-for="item in portList" :label="item.code" :key="item.code">{{item.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="统计月度：">
                        <el-date-picker v-model="condition['search_GTE_dateTime']" type="date" placeholder="选择日期"
                                        value-format="yyyy-MM-dd"></el-date-picker>
                        至
                        <el-date-picker v-model="condition['search_LTE_dateTime']" type="date" placeholder="选择日期"
                                        value-format="yyyy-MM-dd"></el-date-picker>
                        <!-- <dataSlot :startDate.sync="condition['search_GTE_dateTime']" :endDate.sync="condition['search_LTE_dateTime']"
                            style="display:inline-block;"></dataSlot> -->
                        <el-button style="margin-left: 10px;" type="primary" class="take-ship" @click="check">查询
                        </el-button>
                        <el-button type="primary" class="take-ship" @click="toPic(1)">统计图</el-button>
                        <el-button type="primary" class="take-ship" @click="toPic(2)">统计表</el-button>
                        <el-button type="primary" class="take-ship" @click="toPicNew">按船代统计</el-button>
                        <el-button type="primary" class="take-ship" @click="print('monthRep')">打印</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="mb-10 z-alert">
            <span class="el-icon-info" style="color: #409efe;margin-left: 10px;"></span>
            统计说明:港装箱以<span class="title-font">理箱完成日期</span>统计;厂装箱以<span class="title-font">船舶计划封航日期</span>统计,进出口以计划上的封航日期统计,港内拆箱以<span
            class="title-font">实际作业时间</span>统
            计;提箱以放行时间统计.统计图表不含特殊作业统计.
        </div>
        <div class="content" v-if="showPic">
            <div class="content-c content-lf">
                <span class="span-line">
                    理箱量
                </span>
                <div class="content-t" style="border-bottom:0;">
                    <div class="ship-dea">
                        <ul class="dea-ul">
                            <li>总理箱量&ensp;&ensp;<i class="dea-num">{{all.IO&&all.IO.total}}</i></li>
                            <li>
                                <div class="dea-bor">|</div>
                                出口理箱量&ensp;&ensp;<i class="dea-num">{{all.IO&&all.IO.exportTeu}}</i>
                            </li>
                            <li>
                                <div class="dea-bor">|</div>
                                进口理箱量&ensp;<i class="dea-num">{{all.IO&&all.IO.importTeu}}</i>
                            </li>
                        </ul>
                        <el-button type="primary" class="take-ship ship-gre" @click="isTable('left1')">图表转换</el-button>
                    </div>
                    <span class="danw" style="text-align: left;margin-left:20px;">单位:TEU</span>
                    <div v-if="left1">
                        <div id="pieF" style="height:350px;"></div>
                    </div>
                    <div v-else style="margin:20px;">
                        <h3 style="text-align:center;">进出口空重理箱表</h3>
                        <el-table :data="all.IO.details" border style="margin-top:20px;">
                            <el-table-column label="进出口" prop="importExport"></el-table-column>
                            <el-table-column label="重箱" prop="heavyTeu"></el-table-column>
                            <el-table-column label="空箱" prop="emptyTeu"></el-table-column>
                            <el-table-column label="重箱比例">
                                <template slot-scope="scope">
                                    {{scope.row | filterNumByMonthReport(1)}}
                                </template>
                            </el-table-column>
                            <el-table-column label="空箱比例">
                                <template slot-scope="scope">
                                    {{scope.row | filterNumByMonthReport(2)}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="content-t content-mar" style="height:435px;border-bottom:0;">
                    <div class="ship-dea">
                        <ul class="dea-ul">
                            <li>总理箱量&ensp;&ensp;<i class="dea-num">{{all.EF&&all.EF.total}}</i></li>
                            <li>
                                <div class="dea-bor">|</div>
                                理重箱量&ensp;&ensp;<i class="dea-num">{{all.EF&&all.EF.heavyTeu}}</i>
                            </li>
                            <li>
                                <div class="dea-bor">|</div>
                                理空量&ensp;<i class="dea-num">{{all.EF&&all.EF.emptyTeu}}</i>
                            </li>
                        </ul>
                        <el-button type="primary" class="take-ship ship-gre" @click="isTable('left2')">图表转换</el-button>
                        <div v-if="left2">
                            <div id="linF" style="height:350px;"></div>
                        </div>
                        <div v-else style="margin:20px;">
                            <h3 style="text-align:center;">各港口空重理箱图</h3>
                            <el-table :data="all.EF.details" border style="margin-top:20px;" show-summary>
                                <el-table-column label="港口" prop="portName"></el-table-column>
                                <el-table-column label="理重箱量" prop="heavyTeu"></el-table-column>
                                <el-table-column label="理空箱量" prop="emptyTeu"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="content-t content-mar" style="height:566px;position: relative;">
                    <div class="ship-dea">
                        <el-button type="primary" class="take-ship ship-gre table-pos" @click="isTable('left3')">图表转换
                        </el-button>
                        <div v-if="left3">
                            <div id="linS" v-if="left3" style="height:400px;"></div>
                        </div>
                        <div v-else style="margin:20px;height: 400px;">
                            <h3 style="text-align:center;">进出口空重箱环比、同比增长率图</h3>
                            <el-table :data="all.Period.details" border style="margin-top:20px;">
                                <el-table-column prop="planType"></el-table-column>
                                <el-table-column label="上期" prop="lastPeriod"></el-table-column>
                                <el-table-column label="当期" prop="currentPeriod"></el-table-column>
                                <el-table-column label="同期" prop="samePeriod"></el-table-column>
                                <el-table-column label="环比增长率(%)" prop="ringRatio"></el-table-column>
                                <el-table-column label="同比增长率(%)" prop="sameRatio"></el-table-column>
                            </el-table>
                        </div>
                        <div style="margin:20px;margin-top: 55px;">
                            <table class="bot-tab">
                                <tr>
                                    <td rowspan="2">当期理箱量：<i>{{all.Period&&all.Period.currentPeriod}}</i></td>
                                    <td>上期理箱量：<i>{{all.Period&&all.Period.lastPeriod}}</i></td>
                                    <td>同期理箱量：<i>{{all.Period&&all.Period.samePeriod}}</i></td>
                                </tr>
                                <tr>
                                    <td>理箱量环比：<i>{{all.Period&&all.Period.ringRatio}}</i></td>
                                    <td>理箱量同比：<i>{{all.Period&&all.Period.sameRatio}}</i></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-c content-lf" style="float:right;border-bottom:0;">
                <span class="span-line">
                    艘次
                </span>
                <div class="content-t" style="border-bottom:0;">
                    <div class="ship-dea">
                        <ul class="dea-ul">
                            <li>总艘次&ensp;&ensp;<i class="dea-num">{{allAN.exit&&allAN.exit.total}}</i></li>
                            <li>
                                <div class="dea-bor">|</div>
                                出口艘次&ensp;&ensp;<i class="dea-num">{{allAN.exit&&allAN.exit.exportNum}}</i>
                            </li>
                            <li>
                                <div class="dea-bor">|</div>
                                进口艘次&ensp;<i class="dea-num">{{allAN.exit&&allAN.exit.importNum}}</i>
                            </li>
                        </ul>
                        <el-button type="primary" class="take-ship ship-gre" @click="isTable('right1')">图表转换</el-button>
                    </div>
                    <span class="danw" style="text-align: left;margin-left:20px;">单位:艘次</span>
                    <div v-if="right1">
                        <div id="pieS" v-if="right1" style="height:350px;"></div>
                    </div>
                    <div v-else style="margin:20px;">
                        <h3 style="text-align:center;">各港口进出口艘次</h3>
                        <el-table :data="allAN.exit.details" border style="margin-top:20px;" show-summary>
                            <el-table-column prop="portName"></el-table-column>
                            <el-table-column label="进口艘次" prop="importNum"></el-table-column>
                            <el-table-column label="出口艘次" prop="exportNum"></el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="content-t content-mar" style="height:435px;">
                    <div class="ship-dea" style="position: relative;">
                        <ul class="dea-ul">
                            <li>当前艘次&ensp;&ensp;<i class="dea-num">{{allAN.compare&&allAN.compare.currentPeriod}}</i>
                            </li>
                            <li>
                                <div class="dea-bor">|</div>
                                上期艘次&ensp;&ensp;<i class="dea-num">{{allAN.compare&&allAN.compare.lastPeriod}}</i>
                            </li>
                            <li>
                                <div class="dea-bor">|</div>
                                同期艘次&ensp;<i class="dea-num">{{allAN.compare&&allAN.compare.samePeriod}}</i>
                            </li>
                            <li>
                                <div class="dea-bor">|</div>
                                艘次环比(%)&ensp;<i class="dea-num">{{allAN.compare&&allAN.compare.ringRatio}}</i>
                            </li>
                            <li>
                                <div class="dea-bor">|</div>
                                艘次同比(%)&ensp;<i class="dea-num">{{allAN.compare&&allAN.compare.sameRatio}}</i>
                            </li>
                        </ul>
                        <div style="display: inline-block;position: relative;top: -13px;">
                            <el-button type="primary" class="take-ship ship-gre" @click="isTable('right2')">图表转换
                            </el-button>
                        </div>
                        <div v-if="right2">
                            <div id="linT" style="height:350px;"></div>
                        </div>
                        <div v-else style="margin:20px;">
                            <h3 style="text-align:center;">艘次环比、同比增长率表</h3>
                            <el-table :data="allAN.compare.details" border style="margin-top:20px;">
                                <el-table-column prop="planType"></el-table-column>
                                <el-table-column label="上期艘次" prop="lastPeriod"></el-table-column>
                                <el-table-column label="当期艘次" prop="currentPeriod"></el-table-column>
                                <el-table-column label="同期艘次" prop="samePeriod"></el-table-column>
                                <el-table-column label="环比增长率(%)" prop="ringRatio"></el-table-column>
                                <el-table-column label="同比增长率(%)" prop="sameRatio"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <span class="span-line" style="margin-top: 18px;">
                    拆装箱
                </span>
                <div>
                    <div class="content-t" style="margin-top: 57px;height: 507px;position: relative;">
                        <div class="ship-dea">
                            <el-button type="primary" class="take-ship ship-gre table-pos" @click="isTable('right3')">
                                图表转换
                            </el-button>
                            <div v-if="right3">
                                <div id="linFour" style="height:350px;"></div>
                            </div>
                            <div v-else style="margin:20px;height: 350px;">
                                <h3 style="text-align:center;">拆装箱环比、同比增长率表</h3>
                                <el-table :data="allTh.aapDate.details" border style="margin-top:20px;">
                                    <el-table-column prop="planType"></el-table-column>
                                    <el-table-column label="上期" prop="lastPeriod"></el-table-column>
                                    <el-table-column label="当期" prop="currentPeriod"></el-table-column>
                                    <el-table-column label="同期" prop="samePeriod"></el-table-column>
                                    <el-table-column label="环比增长率(%)" prop="ringRatio"></el-table-column>
                                    <el-table-column label="同比增长率(%)" prop="sameRatio"></el-table-column>
                                </el-table>
                            </div>
                            <div style="margin:20px;margin-top: 47px;">
                                <table class="bot-tab" style="margin-top:0px">
                                    <tr>
                                        <td rowspan="2">当期总拆装箱：<i>{{allTh.aapDate&&allTh.aapDate.currentPeriod}}</i>
                                        </td>
                                        <td>上期拆装箱：<i>{{allTh.aapDate&&allTh.aapDate.lastPeriod}}</i></td>
                                        <td>同期拆装箱：<i>{{allTh.aapDate&&allTh.aapDate.samePeriod}}</i></td>
                                    </tr>
                                    <tr>
                                        <td>拆装箱环比：<i>{{allTh.aapDate&&allTh.aapDate.ringRatio}}</i></td>
                                        <td>拆装箱同比：<i>{{allTh.aapDate&&allTh.aapDate.sameRatio}}</i></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content" v-if="showTable">
            <el-button type="primary" @click="toTB(1)">同比表</el-button>
            <el-button type="primary" @click="toTB(2)">环比表</el-button>
            <h3 style="text-align:center">{{factShowTime}}统计报表</h3>
            <h4 style="text-align:right;width: 1100px;margin: 0 auto;font-weight: 400;"><span>统计月度：{{startTime | filtersDatetime}}至{{endTime | filtersDatetime}}</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>单位：TEU</span></h4>
            <table class="all-tab">
                <tr>
                    <td>类别</td>
                    <td colspan="2">类型</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.portName}}</td>
                </tr>
                <tr>
                    <td>装箱</td>
                    <td colspan="2">场站装箱</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.total==0?'':x.total}}</td>
                </tr>
                <!--<tr>
                    <td>厂外装箱</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.CZtotal}}</td>
                </tr>
                <tr class="td-bg">
                    <td>小计</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.CZXtotal}}</td>
                </tr>-->
                <tr class="td-bg2">
                    <td rowspan="3">拆箱</td>
                    <td colspan="2">港内掏箱</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.CXgn==0?'':x.CXgn}}</td>
                </tr>
                <tr class="td-bg2">
                    <td colspan="2">整箱提运</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.CXzx==0?'':x.CXzx}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="2">小计</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.CXtotal==0?'':x.CXtotal}}</td>
                </tr>
                <tr>
                    <td rowspan="5">进口</td>
                    <td colspan="2">艘次</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.ivoyage==0?'':x.ivoyage}}</td>
                </tr>
                <tr>
                    <td rowspan="2">重箱</td>
                    <td>中转</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.iwaterTeu==0?'':x.iwaterTeu}}</td>
                </tr>
                <tr>
                    <td>非中转</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.inoWaterTeu==0?'':x.inoWaterTeu}}</td>
                </tr>
                <tr>
                    <td colspan="2">空箱</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.iemptyTeu==0?'':x.iemptyTeu}}</td>
                </tr>
                <!--<tr>
                    <td>水转水</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.iwaterTeu}}</td>
                </tr>
                <tr>
                    <td>非水转水</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.inoWaterTeu}}</td>
                </tr>-->
                <tr class="td-bg">
                    <td colspan="2">理箱量</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.iTotal==0?'':x.iTotal}}</td>
                </tr>
                <tr class="td-bg2">
                    <td rowspan="6">出口</td>
                    <td colspan="2">艘次</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.ovoyage==0?'':x.ovoyage}}</td>
                </tr>
                <tr class="td-bg2">
                    <td rowspan="3">重箱</td>
                    <td>港装</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.ogzteu==0?'':x.ogzteu}}</td>
                </tr>
                <tr>
                    <td class="td-bg2">厂装</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.oczteu==0?'':x.oczteu}}</td>
                </tr>
                <tr>
                    <td class="td-bg2">中转</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.owaterTeu==0?'':x.owaterTeu}}</td>
                </tr>
                <tr class="td-bg2">
                    <td colspan="2">空箱</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.oemptyTeu==0?'':x.oemptyTeu}}</td>
                </tr>
                <!--<tr class="td-bg2">
                    <td colspan="2">水转水</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.owaterTeu}}</td>
                </tr>
                <tr class="td-bg2">
                    <td colspan="2">非水转水</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.onoWaterTeu}}</td>
                </tr>-->
                <tr class="td-bg">
                    <td colspan="2">理箱量</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.oTotal ==0? '': x.oTotal}}</td>
                </tr>
                <tr>
                    <td rowspan="3">特殊作业</td>
                    <td colspan="2">熏蒸</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.xz ==0? '': x.xz}}</td>
                </tr>
                <tr>
                    <td colspan="2">二转</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.ez ==0? '': x.ez}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="2">理箱量</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.xzTotal==0?'':x.xzTotal}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="3">总艘次</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.totalV==0?'':x.totalV}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="3">理重箱量</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.totalH==0?'':x.totalH}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="3">理空箱量</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.totalE==0?'':x.totalE}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="3">总理箱量</td>
                    <td v-for="(x,k) in tabelData" :key="k">{{x.totalAll==0?'':x.totalAll}}</td>
                </tr>
            </table>
        </div>
        <div class="content" v-if="showMonthTable">
            <el-button type="primary" @click="handlePrintShipName('monthShipName')">打印</el-button>
            <el-button type="primary" @click="toExcel">导出</el-button>
            <h3 style="text-align:center">{{factShowTime}}船代统计报表</h3>
            <h4 style="text-align:right;width: 1100px;margin: 0 auto;font-weight: 400;"><span>统计月度：{{startTime | filtersDatetime}}至{{endTime | filtersDatetime}}</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>单位：TEU</span></h4>
            <table class="all-tab ceshi">
                <tr v-show="false">
                    <td colspan="15">
                        <h3 style="text-align:center">{{factShowTime}}船代统计报表</h3>
                    </td>
                </tr>
                <tr v-show="false">
                    <td colspan="15">
                        <h4 style="text-align:right;width: 1100px;margin: 0 auto;font-weight: 400;"><span>统计月度：{{startTime | filtersDatetime}}至{{endTime | filtersDatetime}}</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>单位：TEU</span></h4>
                    </td>
                </tr>
                <tr>
                    <td rowspan="3" width="10%">单位\项目</td>
                    <td colspan="8">箱量(TEU)</td>
                    <td colspan="6">合同执行价(元)</td>
                </tr>
                <tr>
                    <td colspan="4">本月</td>
                    <td colspan="4">累计</td>
                    <td colspan="3">本月</td>
                    <td colspan="3">累计</td>
                </tr>
                <tr>
                    <td>箱量</td>
                    <td>同期</td>
                    <td>同比</td>
                    <td>环比</td>
                    <td>箱量</td>
                    <td>同期</td>
                    <td>同比</td>
                    <td>环比</td>
                    <td>金额</td>
                    <td>同期</td>
                    <td>同比</td>
                    <td>金额</td>
                    <td>同期</td>
                    <td>同比</td>
                </tr>
                <tr v-for="item of monthShipNameList">
                    <td>{{item.accountUnit}}</td>
                    <td>{{item.monthTue}}</td>
                    <td>{{item.monthStage}}</td>
                    <td>{{item.monthCompare == null ? "/" : (Number(item.monthCompare*100).toFixed(2)+"%")}}</td>
                    <td>{{item.monthRing == null ? "/" : (Number(item.monthRing*100).toFixed(2)+"%")}}</td>
                    <td>{{item.totalTue}}</td>
                    <td>{{item.totalStage}}</td>
                    <td>{{item.totalCompare == null ? "/" : (Number(item.totalCompare*100).toFixed(2)+"%")}}</td>
                    <td>{{item.totalRing == null ? "/" : (Number(item.totalRing*100).toFixed(2)+"%")}}</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr v-if="monthShipNameList.length == 0">
                    <td colspan="15" style="text-align: center;">暂无数据</td>
                </tr>
            </table>
        </div>
        <el-dialog :title="showTitle===1?'同比表':'环比表'" :visible.sync="showTB" :modal="false" width="1200px">
            <el-button type="primary" class="take-ship" @click="print(showTitle===1?'Chain':'YOY')"
                       style="position: absolute;right: 140px;">打印
            </el-button>
            <el-button type="primary" class="take-ship" @click="handleExport(showTitle===1?'Chain':'YOY')"
                       style="position: absolute;right: 60px;">
                导出
            </el-button>

            <h3 style="text-align:center">{{factShowTime}}{{showTitle===1?'同比':'环比'}}增长率统计表</h3>
            <ul class="tb-ul">
                <li>作业港口：{{portName.join(',')}}</li>
                <li style="padding-left:50px;">统计月度：{{startTime | filtersDatetime}}至{{endTime | filtersDatetime}}</li>
                <li style="float:right;">单位：TEU</li>
            </ul>

            <table class="all-tab">
                <tr>
                    <td>类别</td>
                    <td>类型</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.portName}}</td>
                </tr>
                <tr>
                    <td rowspan="3">装箱</td>
                    <td>港内装箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.total  ==0? '': x.total}}</td>
                </tr>
                <tr>
                    <td>厂外装箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.CZtotal  ==0? '': x.CZtotal}}</td>
                </tr>
                <tr class="td-bg">
                    <td>小计</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{(x.CZXtotal|filterZero)  ==0? '': x.CZXtotal|filterZero}}</td>
                </tr>
                <tr class="td-bg2">
                    <td rowspan="3">拆箱</td>
                    <td>港内掏箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.CXgn  ==0? '': x.CXgn}}</td>
                </tr>
                <tr class="td-bg2">
                    <td>整箱提运</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.CXzx  ==0? '': x.CXzx}}</td>
                </tr>
                <tr class="td-bg">
                    <td>小计</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.CXtotal|filterZero}}</td>
                </tr>
                <tr>
                    <td rowspan="6">进口</td>
                    <td>艘次</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.ivoyage}}</td>
                </tr>
                <tr>
                    <td>重箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.iheavyTeu}}</td>
                </tr>
                <tr>
                    <td>空箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.iemptyTeu}}</td>
                </tr>
                <tr>
                    <td>水转水</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.iwaterTeu}}</td>
                </tr>
                <tr>
                    <td>非水转水</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.inoWaterTeu}}</td>
                </tr>
                <tr class="td-bg">
                    <td>理箱量</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.iTotal|filterZero}}</td>
                </tr>
                <tr class="td-bg2">
                    <td rowspan="6">出口</td>
                    <td>艘次</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.ovoyage}}</td>
                </tr>
                <tr class="td-bg2">
                    <td>重箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.oheavyTeu}}</td>
                </tr>
                <tr class="td-bg2">
                    <td>空箱</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.oemptyTeu}}</td>
                </tr>
                <tr class="td-bg2">
                    <td>水转水</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.owaterTeu}}</td>
                </tr>
                <tr class="td-bg2">
                    <td>非水转水</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.onoWaterTeu}}</td>
                </tr>
                <tr class="td-bg">
                    <td>理箱量</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.oTotal|filterZero}}</td>
                </tr>
                <tr>
                    <td rowspan="3">特殊作业</td>
                    <td>熏蒸</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.xz}}</td>
                </tr>
                <tr>
                    <td>二转</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.ez}}</td>
                </tr>
                <tr class="td-bg">
                    <td>理箱量</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.xzTotal|filterZero}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="2">总艘次</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.totalV|filterZero}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="2">理重箱量</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.totalH|filterZero}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="2">理空箱量</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.totalE|filterZero}}</td>
                </tr>
                <tr class="td-bg">
                    <td colspan="2">总理箱量</td>
                    <td v-for="(x,k) in tabelDataTB" :key="k">{{x.totalAll|filterZero}}</td>
                </tr>
            </table>
        </el-dialog>
    </div>
</template>
<script>
    import axios from 'axios';
    import { getCookie, Token } from "@/utils/cookie";
    import dataSlot from '@/components/date/dateSlot';
    import { getWLPort } from "@/api/port/port";
    import {
        getMonthReport,
        getMonthReportV,
        getMonthReportC,
        getMonthTabRepZX,
        getMonthTabRepZXTB,
        getMonthTabRepZXHB,
        getMonthTabRepCX,
        getMonthTabRepCXTB,
        getMonthTabRepCXHB,
        getMonthTabRepIO,
        getMonthTabRepIOTB,
        getMonthTabRepIOHB,
        getMonthTabRepSP,
        getMonthTabRepSPTB,
        getMonthTabRepSPHB,
        getMonthShipNameReport
    } from "@/api/shipPlan/shipPlan";
    import {
        getLocalTime
    } from "@/utils/dateFormat";
    import {
        portCode
    } from '@/assets/dict'
    // 引入基本模板
    let echarts = require("echarts/lib/echarts");
    import "echarts/theme/macarons";
    // 引入提示框和title组件
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    require("echarts/lib/component/legend");
    require("echarts/lib/chart/line");
    require("echarts/lib/chart/pie");
    require("echarts/lib/chart/bar");
    export default {
        name: "财务月报",
        components: {
            dataSlot
        },
        data() {
            return {
                condition: {
                    search_IN_portCode: [],
                    search_GTE_dateTime: getLocalTime(new Date(), 'YYYY-MM')+'-01',
                    search_LTE_dateTime: getLocalTime(new Date(), 'YYYY-MM-DD')
                },
                startTime: getLocalTime(new Date(), 'YYYY-MM'),
                endTime: getLocalTime(new Date(), 'YYYY-MM'),
                factShowTime : getLocalTime(new Date(), 'YYYY-MM')+'至'+getLocalTime(new Date(), 'YYYY-MM'),
                isPic: 1,
                showPic: false,
                showTable: false,
                showMonthTable : false,
                showTB: false,
                showHB: false,
                showTitle: 1,
                monthShipNameList: [],
                portName: [],
                all: {},
                allAN: {},
                allTh: {},
                left1: true,
                left1Data: {
                    out: [],
                    in: []
                },
                left2: true,
                left2Data: {
                    stations: [],
                    ups: [],
                    downs: []
                },
                left3: true,
                left3Data: {
                    up: [],
                    now: [],
                    sp: [],
                    cr: [],
                    sr: []
                },
                right1: true,
                right1Data: {
                    out: [],
                    in: []
                },
                right2: true,
                right2Data: {
                    up: [],
                    now: [],
                    sp: [],
                    cr: [],
                    sr: []
                },
                right3: true,
                right3Data: {
                    up: [],
                    now: [],
                    sp: [],
                    cr: [],
                    sr: []
                },
                tabelData: [],
                tabelDataTB: [],
                tabelDataHB: [],

                filename: '',
                portList:[]
            }
        },
        mounted() {
            this.check()
            this.loadPortList()
        },
        filters : {
            filterNumByMonthReport(row, type) {
                let totalNumber = row.emptyTeu + row.heavyTeu
                let number=row.heavyTeu/totalNumber
                let str=Number(number*100).toFixed(2);
                if (type == 1){
                    str+="%";
                } else {
                    str = Number(100-str).toFixed(2) + "%"
                }
                return str
            },
            filtersDatetime(val){
                return new Date(val).getFullYear()+"年"+(new Date(val).getMonth()+1)+"月"+new Date(val).getDate()+"日"
            }
        },
        methods: {
            loadPortList(){
                getWLPort().then(res => {
                    this.portList = res.data.aaData
                    res.data.aaData.forEach(record => {
                        this.condition.search_IN_portCode.push(record.code)
                        this.portName.push(record.name)
                    })
                })
            },
            //Ltt 导出
            handleExport(item) {
                var instance = axios.create({
                    baseURL: this.DERIVE.deriveUrl, // 开发环境跨域配置的地址
                    timeout: 30000, // 请求超时时间
                    responseType: 'blob',
                    headers: {
                        "Authorization": getCookie(Token),
                        "Content-Type": "application/json"
                    }
                });
                instance.interceptors.response.use(
                    response => {
                        this.filename = decodeURI(response.headers['content-disposition'].slice(20));
                        return response.data;
                    },
                    error => {
                        return Promise.reject(error);
                    }
                );
                let search_IN_portCode = this.condition['search_IN_portCode'].join(',');
                let search_EQ_ExcelPortName = this.arrayToString(this.portName);
                if (item === 'Chain') {
                    instance.get('/report/sameExcel', {
                        params: {
                            search_IN_portCode: search_IN_portCode,
                            search_GTE_dateTime: this.condition['search_GTE_dateTime'],
                            search_LTE_dateTime: this.condition['search_LTE_dateTime'],
                            search_EQ_ExcelPortName: search_EQ_ExcelPortName
                        }
                    }).then(res => {
                        var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
                        //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
                        var downloadElement = document.createElement('a');
                        var href = window.URL.createObjectURL(blob); //创建下载的链接
                        downloadElement.href = href;
                        downloadElement.download = this.filename; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        document.body.removeChild(downloadElement); //下载完成移除元素
                        window.URL.revokeObjectURL(href); //释放掉blob对象
                    })
                } else {
                    instance.get('/report/ringRatioExcel', {
                        params: {
                            search_IN_portCode: search_IN_portCode,
                            search_GTE_dateTime: this.condition['search_GTE_dateTime'],
                            search_LTE_dateTime: this.condition['search_LTE_dateTime'],
                            search_EQ_ExcelPortName: search_EQ_ExcelPortName
                        }
                    }).then(res => {
                        var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
                        //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
                        var downloadElement = document.createElement('a');
                        var href = window.URL.createObjectURL(blob); //创建下载的链接
                        downloadElement.href = href;
                        downloadElement.download = this.filename; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        document.body.removeChild(downloadElement); //下载完成移除元素
                        window.URL.revokeObjectURL(href); //释放掉blob对象
                    })
                }

            },


            toNumberR(x) {
                if (x === '-') {
                    return 0
                } else {
                    return Number(x)
                }
            },
            toTB(x) {
                if (x === 1) {
                    this.loadData3()
                } else {
                    this.loadData4()
                }
            },
            arrayToString:function(arr){
                let value = ""
                if (arr != null && arr != "" && arr.length > 0){
                    arr.forEach((column, index) => {
                        value = value + "," + column
                    })
                    value = value.substring(1)
                }
                return value
            },
            handlePrintShipName(router){
                localStorage.setItem('monthReportShipName', JSON.stringify(this.monthShipNameList))
                const origin = window.location.origin + window.location.pathname
                const route = `#/${router}/`
                window.open(`${origin}${route}?factShowTime=${this.factShowTime}`);
            },
            loadData() {
                this.showPic = true
                let params = JSON.parse(JSON.stringify(this.condition))
                params.search_IN_portCode = params.search_IN_portCode.join(',')
                this.left1Data = {
                    out: [],
                    in: []
                }
                this.left2Data = {
                    stations: [],
                    ups: [],
                    downs: []
                }
                this.left3Data = {
                    up: [],
                    now: [],
                    sp: [],
                    cr: [],
                    sr: []
                }
                this.right1Data = {
                    out: [],
                    in: []
                }
                this.right2Data = {
                    up: [],
                    now: [],
                    sp: [],
                    cr: [],
                    sr: []
                }
                this.right3Data = {
                    up: [],
                    now: [],
                    sp: [],
                    cr: [],
                    sr: []
                }
                getMonthReport(params).then(res => {
                    this.all = res.data
                    if (res.data.IO && res.data.IO.details) {
                        res.data.IO.details.forEach(element => {
                            if (element.importExport === '进口') {
                                this.left1Data.in = [{
                                    value: element.heavyTeu,
                                    name: '重箱',
                                    val: '进口'
                                },
                                    {
                                        value: element.emptyTeu,
                                        name: '空箱',
                                        val: '进口'
                                    }
                                ]
                            } else if (element.importExport === '出口') {
                                this.left1Data.out = [{
                                    value: element.heavyTeu,
                                    name: '重箱',
                                    val: '出口',
                                    itemStyle: {
                                        color: '#61a0a9'
                                    }
                                },
                                    {
                                        value: element.emptyTeu,
                                        name: '空箱',
                                        val: '出口',
                                        itemStyle: {
                                            color: '#ff6600'
                                        }
                                    }
                                ]
                            }
                        });
                    }
                    if (res.data.EF && res.data.EF.details) {
                        res.data.EF.details.forEach(element => {
                            this.left2Data.stations.push(element.portName)
                            this.left2Data.ups.push(element.heavyTeu)
                            this.left2Data.downs.push(element.emptyTeu)
                        })
                    }
                    if (res.data.Period && res.data.Period.details) {
                        res.data.Period.details.forEach(element => {
                            this.left3Data.up.push(element.lastPeriod)
                            this.left3Data.now.push(element.currentPeriod)
                            this.left3Data.sp.push(element.samePeriod)
                            this.left3Data.cr.push(element.ringRatio)
                            this.left3Data.sr.push(element.sameRatio)
                        })
                    }
                    // if (res.data.IO && res.data.IO.details) {
                    //     res.data.IO.details.forEach(element => {
                    //         if (element.importExport === '进口') {
                    //             this.left1Data.in = [{
                    //                     value: element.heavyTeu,
                    //                     name: '重箱',
                    //                     val: '进口'
                    //                 },
                    //                 {
                    //                     value: element.emptyTeu,
                    //                     name: '空箱',
                    //                     val: '进口'
                    //                 }
                    //             ]
                    //         } else if (element.importExport === '出口') {
                    //             this.left1Data.out = [{
                    //                     value: element.heavyTeu,
                    //                     name: '重箱',
                    //                     val: '出口'
                    //                 },
                    //                 {
                    //                     value: element.emptyTeu,
                    //                     name: '空箱',
                    //                     val: '出口'
                    //                 }
                    //             ]
                    //         }
                    //     });
                    // }
                    getMonthReportV(params).then(res => {
                        this.allAN = res.data
                        if (res.data.exit && res.data.exit.details) {
                            res.data.exit.details.forEach(element => {
                                this.right1Data.in.push({
                                    value: element.importNum,
                                    name: element.portName,
                                    val: '进口'
                                })
                                this.right1Data.out.push({
                                    value: element.exportNum,
                                    name: element.portName,
                                    val: '出口'
                                })
                            });
                        }
                        if (res.data.compare && res.data.compare.details) {
                            res.data.compare.details.forEach(element => {
                                this.right2Data.up.push(element.lastPeriod)
                                this.right2Data.now.push(element.currentPeriod)
                                this.right2Data.sp.push(element.samePeriod)
                                this.right2Data.cr.push(element.ringRatio)
                                this.right2Data.sr.push(element.sameRatio)
                            })
                        }
                        getMonthReportC(params).then(res => {
                            this.allTh = res.data
                            if (res.data.aapDate && res.data.aapDate.details) {
                                res.data.aapDate.details.forEach(element => {
                                    this.right3Data.up.push(element.lastPeriod)
                                    this.right3Data.now.push(element.currentPeriod)
                                    this.right3Data.sp.push(element.samePeriod)
                                    this.right3Data.cr.push(Number(element.ringRatio))
                                    this.right3Data.sr.push(Number(element.sameRatio))
                                })
                            }
                            this.inintPieF()
                            this.inintPieS()
                            this.initLineF()
                            this.initLineS()
                            this.initLineT()
                            this.initLineFour()
                        })
                    })
                })
            },
            loadData2() {
                let params = JSON.parse(JSON.stringify(this.condition))
                params.search_IN_portCode = params.search_IN_portCode.join(',')
                getMonthTabRepZX(params).then(res => {
                    this.tabelData = res.data.GZ
                    for (let el of this.tabelData) {
                        let result = res.data.CZ.findIndex(ol => {
                            return el.portName === ol.portName
                        })
                        if (result !== -1) {
                            el.CZtotal = res.data.CZ[result].total
                            el.CZXtotal = el.total + el.CZtotal
                            el.CZXcargoCount = res.data.CZ[result].cargoCount
                            el.CZXcargoWeight = res.data.CZ[result].cargoWeight
                        }
                    }
                    getMonthTabRepCX(params).then(res => {
                        for (let el of this.tabelData) {
                            let result = res.data.PASS.findIndex(ol => {
                                return el.portName === ol.portName
                            })
                            if (result !== -1) {
                                el.CXzx = res.data.PASS[result].total
                                el.CXzxcargoCount = res.data.PASS[result].cargoCount
                                el.CXzxcargoWeight = res.data.PASS[result].cargoWeight
                            }
                            let result2 = res.data.CX.findIndex(ol => {
                                return el.portName === ol.portName
                            })
                            if (result !== -1) {
                                el.CXgn = res.data.CX[result2].total
                                el.CXgncargoCount = res.data.CX[result2].cargoCount
                                el.CXgncargoWeight = res.data.CX[result2].cargoWeight
                                //拆箱小计
                                el.CXtotal = el.CXzx + el.CXgn
                                el.CXcargoCount = el.CXzxcargoCount + el.CXgncargoCount
                                el.CXcargoWeight = el.CXzxcargoWeight + el.CXgncargoWeight
                            }
                        }
                        getMonthTabRepIO(params).then(res => {
                            for (let el of this.tabelData) {
                                let result = res.data.Import.findIndex(ol => {
                                    return el.portName === ol.portName
                                })
                                if (result !== -1) {
                                    el.ivoyage = res.data.Import[result].voyage
                                    el.iheavyTeu = res.data.Import[result].heavyTeu
                                    el.iemptyTeu = res.data.Import[result].emptyTeu
                                    el.iwaterTeu = res.data.Import[result].waterTeu
                                    el.inoWaterTeu = res.data.Import[result].noWaterTeu
                                    el.iTotal = el.iwaterTeu + el.inoWaterTeu + el.iemptyTeu
                                }
                                let result2 = res.data.Export.findIndex(ol => {
                                    return el.portName === ol.portName
                                })
                                if (result2 !== -1) {
                                    el.oczteu = res.data.Export[result].czteu
                                    el.ogzteu = res.data.Export[result].gzteu
                                    el.ovoyage = res.data.Export[result].voyage
                                    el.oheavyTeu = res.data.Export[result].heavyTeu
                                    el.oemptyTeu = res.data.Export[result].emptyTeu
                                    el.owaterTeu = res.data.Export[result].waterTeu
                                    el.onoWaterTeu = res.data.Export[result].noWaterTeu
                                    el.oTotal = el.ogzteu + el.oczteu + el.owaterTeu + el.oemptyTeu
                                }
                            }
                            getMonthTabRepSP(params).then(res => {
                                let allAcc = {
                                    portName: '合计',
                                    total: 0,
                                    CZtotal: 0,
                                    CZXtotal: 0,
                                    CXgn: 0,
                                    CXzx: 0,
                                    CXtotal: 0,
                                    ivoyage: 0,
                                    iheavyTeu: 0,
                                    iemptyTeu: 0,
                                    iwaterTeu: 0,
                                    inoWaterTeu: 0,
                                    iTotal: 0,
                                    ogzteu: 0,
                                    oczteu: 0,
                                    ovoyage: 0,
                                    oheavyTeu: 0,
                                    oemptyTeu: 0,
                                    owaterTeu: 0,
                                    onoWaterTeu: 0,
                                    oTotal: 0,
                                    xz: 0,
                                    ez: 0,
                                    xzTotal: 0,
                                    totalV: 0,
                                    totalH: 0,
                                    totalE: 0,
                                    totalAll: 0,
                                }
                                let countAcc = {
                                    portName: '合计件数',
                                    total: 0,
                                    CZtotal: 0,
                                    CZXtotal: 0,
                                    CXgn: 0,
                                    CXzx: 0,
                                    CXtotal: 0,
                                    ivoyage: 0,
                                    iheavyTeu: 0,
                                    iemptyTeu: 0,
                                    iwaterTeu: 0,
                                    inoWaterTeu: 0,
                                    iTotal: 0,
                                    ogzteu: 0,
                                    oczteu: 0,
                                    ovoyage: 0,
                                    oheavyTeu: 0,
                                    oemptyTeu: 0,
                                    owaterTeu: 0,
                                    onoWaterTeu: 0,
                                    oTotal: 0,
                                    xz: 0,
                                    ez: 0,
                                    xzTotal: 0,
                                    totalV: 0,
                                    totalH: 0,
                                    totalE: 0,
                                    totalAll: 0,
                                }
                                
                                let weightAcc = {
                                    portName: '合计重量',
                                    total: 0,
                                    CZtotal: 0,
                                    CZXtotal: 0,
                                    CXgn: 0,
                                    CXzx: 0,
                                    CXtotal: 0,
                                    ivoyage: 0,
                                    iheavyTeu: 0,
                                    iemptyTeu: 0,
                                    iwaterTeu: 0,
                                    inoWaterTeu: 0,
                                    iTotal: 0,
                                    ogzteu: 0,
                                    oczteu: 0,
                                    ovoyage: 0,
                                    oheavyTeu: 0,
                                    oemptyTeu: 0,
                                    owaterTeu: 0,
                                    onoWaterTeu: 0,
                                    oTotal: 0,
                                    xz: 0,
                                    ez: 0,
                                    xzTotal: 0,
                                    totalV: 0,
                                    totalH: 0,
                                    totalE: 0,
                                    totalAll: 0,
                                }
                                for (let el of this.tabelData) {
                                    let result = res.data.XZ.findIndex(ol => {
                                        return el.portName === ol.portName
                                    })
                                    if (result !== -1) {
                                        el.xz = res.data.XZ[result].total
                                        el.xzcargoCount = res.data.XZ[result].cargoCount
                                        el.xzcargoWeight = res.data.XZ[result].cargoWeight
                                    }
                                    let result2 = res.data.EZ.findIndex(ol => {
                                        return el.portName === ol.portName
                                    })
                                    if (result2 !== -1) {
                                        el.ez = res.data.EZ[result].total
                                        el.ezcargoCount = res.data.EZ[result].cargoCount
                                        el.ezcargoWeight = res.data.EZ[result].cargoWeight

                                        el.xzTotal = el.xz + el.ez
                                        el.xzcargoCount = el.xzcargoCount + el.ezcargoCount
                                        el.xzcargoWeight = el.xzcargoWeight + el.ezcargoWeight
                                    }
                                    el.totalV = el.ivoyage + el.ovoyage
                                    el.totalH = el.iheavyTeu + el.oheavyTeu
                                    el.totalE = el.iemptyTeu + el.oemptyTeu
                                    el.totalAll = el.totalH + el.totalE
                                    allAcc.total = allAcc.total + el.total //装箱-场站装箱
                                    allAcc.CZtotal = allAcc.CZtotal + el.CZtotal
                                    allAcc.CZXtotal = allAcc.CZXtotal + el.CZXtotal
                                    allAcc.CXgn = allAcc.CXgn + el.CXgn  //拆箱-港内掏箱
                                    allAcc.CXzx = allAcc.CXzx + el.CXzx //拆箱-整箱梯云
                                    allAcc.CXtotal = allAcc.CXtotal + el.CXtotal //拆箱-小计
                                    allAcc.ivoyage = allAcc.ivoyage + el.ivoyage
                                    allAcc.iheavyTeu = allAcc.iheavyTeu + el.iheavyTeu
                                    allAcc.iemptyTeu = allAcc.iemptyTeu + el.iemptyTeu
                                    allAcc.iwaterTeu = allAcc.iwaterTeu + el.iwaterTeu
                                    allAcc.inoWaterTeu = allAcc.inoWaterTeu + el.inoWaterTeu
                                    allAcc.iTotal = allAcc.iTotal + el.iTotal
                                    allAcc.ogzteu = allAcc.ogzteu + el.ogzteu
                                    allAcc.oczteu = allAcc.oczteu + el.oczteu
                                    allAcc.ovoyage = allAcc.ovoyage + el.ovoyage
                                    allAcc.oheavyTeu = allAcc.oheavyTeu + el.oheavyTeu
                                    allAcc.oemptyTeu = allAcc.oemptyTeu + el.oemptyTeu
                                    allAcc.owaterTeu = allAcc.owaterTeu + el.owaterTeu
                                    allAcc.onoWaterTeu = allAcc.onoWaterTeu + el.onoWaterTeu
                                    allAcc.oTotal = allAcc.oTotal + el.oTotal
                                    allAcc.xz = allAcc.xz + el.xz
                                    allAcc.ez = allAcc.ez + el.ez
                                    allAcc.xzTotal = allAcc.xzTotal + el.xzTotal
                                    allAcc.totalV = allAcc.totalV + el.totalV
                                    allAcc.totalH = allAcc.totalH + el.totalH
                                    allAcc.totalE = allAcc.totalE + el.totalE
                                    allAcc.totalAll = allAcc.totalAll + el.totalAll
                                    // 件数合计
                                    countAcc.total = countAcc.total + el.cargoCount
                                    countAcc.CZtotal = countAcc.CZtotal + el.CZcargoCount
                                    countAcc.CZXtotal = countAcc.CZXtotal + el.CZXcargoCount
                                    countAcc.CXgn = countAcc.CXgn + el.CXgncargoCount
                                    countAcc.CXzx = countAcc.CXzx + el.CXzxcargoCount
                                    countAcc.CXtotal = countAcc.CXtotal + el.CXcargoCount
                                    countAcc.ivoyage = countAcc.ivoyage + el.ivoyage
                                    countAcc.iheavyTeu = countAcc.iheavyTeu + el.iheavyTeu
                                    countAcc.iemptyTeu = countAcc.iemptyTeu + el.iemptyTeu
                                    countAcc.iwaterTeu = countAcc.iwaterTeu + el.iwaterTeu
                                    countAcc.inoWaterTeu = countAcc.inoWaterTeu + el.inoWaterTeu
                                    countAcc.iTotal = countAcc.iTotal + el.iTotal
                                    countAcc.ogzteu = countAcc.ogzteu + el.ogzteu
                                    countAcc.oczteu = countAcc.oczteu + el.oczteu
                                    countAcc.ovoyage = countAcc.ovoyage + el.ovoyage
                                    countAcc.oheavyTeu = countAcc.oheavyTeu + el.oheavyTeu
                                    countAcc.oemptyTeu = countAcc.oemptyTeu + el.oemptyTeu
                                    countAcc.owaterTeu = countAcc.owaterTeu + el.owaterTeu
                                    countAcc.onoWaterTeu = countAcc.onoWaterTeu + el.onoWaterTeu
                                    countAcc.oTotal = countAcc.oTotal + el.oTotal
                                    countAcc.xz = countAcc.xz + el.xz
                                    countAcc.ez = countAcc.ez + el.ez
                                    countAcc.xzTotal = countAcc.xzTotal + el.xzcargoCount
                                    countAcc.totalV = countAcc.totalV + el.totalV
                                    countAcc.totalH = countAcc.totalH + el.totalH
                                    countAcc.totalE = countAcc.totalE + el.totalE
                                    countAcc.totalAll = countAcc.totalAll + el.totalAll
                                    // 重量合计
                                    weightAcc.total = this.toDecimal(parseFloat(weightAcc.total) + parseFloat(el.cargoWeight))
                                    weightAcc.CZtotal = this.toDecimal(parseFloat(weightAcc.CZtotal) + parseFloat(el.CZcargoWeight))
                                    weightAcc.CZXtotal = this.toDecimal(parseFloat(weightAcc.CZXtotal) + parseFloat(el.CZXcargoWeight).toFixed(3))
                                    weightAcc.CXgn = this.toDecimal(parseFloat(weightAcc.CXgn) + parseFloat(el.CXgncargoWeight))
                                    weightAcc.CXzx = this.toDecimal(parseFloat(weightAcc.CXzx) + parseFloat(el.CXzxcargoWeight))
                                    weightAcc.CXtotal = this.toDecimal(parseFloat(weightAcc.CXtotal) + parseFloat(el.CXcargoWeight))
                                    weightAcc.ivoyage = this.toDecimal(parseFloat(weightAcc.ivoyage) + parseFloat(el.ivoyage))
                                    weightAcc.iheavyTeu = this.toDecimal(parseFloat(weightAcc.iheavyTeu) + parseFloat(el.iheavyTeu))
                                    weightAcc.iemptyTeu = this.toDecimal(parseFloat(weightAcc.iemptyTeu) + parseFloat(el.iemptyTeu))
                                    weightAcc.iwaterTeu = this.toDecimal(parseFloat(weightAcc.iwaterTeu) + parseFloat(el.iwaterTeu))
                                    weightAcc.inoWaterTeu = this.toDecimal(parseFloat(weightAcc.inoWaterTeu) + parseFloat(el.inoWaterTeu))
                                    weightAcc.iTotal = this.toDecimal(parseFloat(weightAcc.iTotal) + parseFloat(el.iTotal))
                                    weightAcc.ogzteu = this.toDecimal(parseFloat(weightAcc.ogzteu) + parseFloat(el.ogzteu))
                                    weightAcc.oczteu = this.toDecimal(parseFloat(weightAcc.oczteu) + parseFloat(el.oczteu))
                                    weightAcc.ovoyage = this.toDecimal(parseFloat(weightAcc.ovoyage) + parseFloat(el.ovoyage))
                                    weightAcc.oheavyTeu = this.toDecimal(parseFloat(weightAcc.oheavyTeu) + parseFloat(el.oheavyTeu))
                                    weightAcc.oemptyTeu = this.toDecimal(parseFloat(weightAcc.oemptyTeu) + parseFloat(el.oemptyTeu))
                                    weightAcc.owaterTeu = this.toDecimal(parseFloat(weightAcc.owaterTeu) + parseFloat(el.owaterTeu))
                                    weightAcc.onoWaterTeu = this.toDecimal(parseFloat(weightAcc.onoWaterTeu) + parseFloat(el.onoWaterTeu))
                                    weightAcc.oTotal = this.toDecimal(parseFloat(weightAcc.oTotal) + parseFloat(el.oTotal))
                                    weightAcc.xz = this.toDecimal(parseFloat(weightAcc.xz) + parseFloat(el.xz))
                                    weightAcc.ez = this.toDecimal(parseFloat(weightAcc.ez) + parseFloat(el.ez))
                                    weightAcc.xzTotal = this.toDecimal(parseFloat(weightAcc.xzTotal) + parseFloat(el.xzTotal))
                                    weightAcc.totalV = this.toDecimal(parseFloat(weightAcc.totalV) + parseFloat(el.totalV))
                                    weightAcc.totalH = this.toDecimal(parseFloat(weightAcc.totalH) + parseFloat(el.totalH))
                                    weightAcc.totalE = this.toDecimal(parseFloat(weightAcc.totalE) + parseFloat(el.totalE))
                                    weightAcc.totalAll = this.toDecimal(parseFloat(weightAcc.totalAll) + parseFloat(el.totalAll))
                                }
                                this.tabelData.unshift(countAcc)
                                this.tabelData.unshift(weightAcc)
                                this.tabelData.unshift(allAcc)
                                this.showTable = true
                            })
                        })
                    })
                })
            },
            loadData3() {
                let params = JSON.parse(JSON.stringify(this.condition))
                params.search_IN_portCode = params.search_IN_portCode.join(',')
                getMonthTabRepZXTB(params).then(res => {
                    this.tabelDataTB = [{
                        portName: '同期'
                    }, {
                        portName: '当期'
                    }, {
                        portName: '同比增长率(%)'
                    }]
                    for (let el of res.data.aaData) {
                        if (el.planType === '港内装箱') {
                            this.tabelDataTB[0].total = el.samePeriod
                            this.tabelDataTB[1].total = el.currentPeriod
                            this.tabelDataTB[2].total = this.toNumberR(el.sameRatio)
                        } else {
                            this.tabelDataTB[0].CZtotal = el.samePeriod
                            this.tabelDataTB[1].CZtotal = el.currentPeriod
                            this.tabelDataTB[2].CZtotal = this.toNumberR(el.sameRatio)
                        }
                    }
                    this.tabelDataTB.forEach(element => {
                        element.CZXtotal = element.total + element.CZtotal
                        element.CZXtotal = element.CZXtotal.toFixed(2)
                    });
                    this.tabelDataTB[2].CZXtotal = this.tabelDataTB[0].CZXtotal == 0 || this.tabelDataTB[0].CZXtotal == '-' ? 0 : ((this.tabelDataTB[1].CZXtotal - this.tabelDataTB[0].CZXtotal) / this.tabelDataTB[0].CZXtotal) * 100
                    this.tabelDataTB[2].CZXtotal = this.tabelDataTB[2].CZXtotal.toFixed(2)
                    getMonthTabRepCXTB(params).then(res => {
                        for (let el of res.data.aaData) {
                            if (el.planType === '港内掏箱') {
                                this.tabelDataTB[0].CXgn = el.samePeriod
                                this.tabelDataTB[1].CXgn = el.currentPeriod
                                this.tabelDataTB[2].CXgn = this.toNumberR(el.sameRatio)
                            } else {
                                this.tabelDataTB[0].CXzx = el.samePeriod
                                this.tabelDataTB[1].CXzx = el.currentPeriod
                                this.tabelDataTB[2].CXzx = this.toNumberR(el.sameRatio)
                            }
                        }
                        this.tabelDataTB.forEach(element => {
                            element.CXtotal = element.CXgn + element.CXzx
                            element.CXtotal = element.CXtotal.toFixed(2)
                        });
                        this.tabelDataTB[2].CXtotal = this.tabelDataTB[0].CXtotal == 0 || this.tabelDataTB[0].CXtotal == '-' ? 0 : ((this.tabelDataTB[1].CXtotal - this.tabelDataTB[0].CXtotal) / this.tabelDataTB[0].CXtotal) * 100
                        this.tabelDataTB[2].CXtotal = this.tabelDataTB[2].CXtotal.toFixed(2)
                        getMonthTabRepIOTB(params).then(res => {
                            for (let el of res.data.Import) {
                                if (el.planType === '艘次') {
                                    this.tabelDataTB[0].ivoyage = el.samePeriod
                                    this.tabelDataTB[1].ivoyage = el.currentPeriod
                                    this.tabelDataTB[2].ivoyage = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '重箱') {
                                    this.tabelDataTB[0].iheavyTeu = el.samePeriod
                                    this.tabelDataTB[1].iheavyTeu = el.currentPeriod
                                    this.tabelDataTB[2].iheavyTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '空箱') {
                                    this.tabelDataTB[0].iemptyTeu = el.samePeriod
                                    this.tabelDataTB[1].iemptyTeu = el.currentPeriod
                                    this.tabelDataTB[2].iemptyTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '水转水') {
                                    this.tabelDataTB[0].iwaterTeu = el.samePeriod
                                    this.tabelDataTB[1].iwaterTeu = el.currentPeriod
                                    this.tabelDataTB[2].iwaterTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '非水转水') {
                                    this.tabelDataTB[0].inoWaterTeu = el.samePeriod
                                    this.tabelDataTB[1].inoWaterTeu = el.currentPeriod
                                    this.tabelDataTB[2].inoWaterTeu = this.toNumberR(el.sameRatio)
                                }
                            }
                            this.tabelDataTB.forEach(element => {
                                element.iTotal = element.iheavyTeu + element.iemptyTeu
                                element.iTotal = element.iTotal.toFixed(2)
                            });
                            this.tabelDataTB[2].iTotal = this.tabelDataTB[0].iTotal == 0 || this.tabelDataTB[0].iTotal == '-' ? 0 : ((this.tabelDataTB[1].iTotal - this.tabelDataTB[0].iTotal) / this.tabelDataTB[0].iTotal) * 100
                            this.tabelDataTB[2].iTotal = this.tabelDataTB[2].iTotal.toFixed(2)
                            for (let el of res.data.Export) {
                                if (el.planType === '艘次') {
                                    this.tabelDataTB[0].ovoyage = el.samePeriod
                                    this.tabelDataTB[1].ovoyage = el.currentPeriod
                                    this.tabelDataTB[2].ovoyage = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '重箱') {
                                    this.tabelDataTB[0].oheavyTeu = el.samePeriod
                                    this.tabelDataTB[1].oheavyTeu = el.currentPeriod
                                    this.tabelDataTB[2].oheavyTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '空箱') {
                                    this.tabelDataTB[0].oemptyTeu = el.samePeriod
                                    this.tabelDataTB[1].oemptyTeu = el.currentPeriod
                                    this.tabelDataTB[2].oemptyTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '水转水') {
                                    this.tabelDataTB[0].owaterTeu = el.samePeriod
                                    this.tabelDataTB[1].owaterTeu = el.currentPeriod
                                    this.tabelDataTB[2].owaterTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '非水转水') {
                                    this.tabelDataTB[0].onoWaterTeu = el.samePeriod
                                    this.tabelDataTB[1].onoWaterTeu = el.currentPeriod
                                    this.tabelDataTB[2].onoWaterTeu = this.toNumberR(el.sameRatio)
                                }
                            }
                            this.tabelDataTB.forEach(element => {
                                element.oTotal = element.oemptyTeu + element.oheavyTeu
                                element.oTotal = element.oTotal.toFixed(2)
                            });
                            this.tabelDataTB[2].oTotal = this.tabelDataTB[0].oTotal == 0 || this.tabelDataTB[0].oTotal == '-' ? 0 : ((this.tabelDataTB[1].oTotal - this.tabelDataTB[0].oTotal) / this.tabelDataTB[0].oTotal) * 100
                            this.tabelDataTB[2].oTotal = this.tabelDataTB[2].oTotal.toFixed(2)
                            getMonthTabRepSPTB(params).then(res => {
                                for (let el of res.data.aaData) {
                                    if (el.planType === '熏蒸') {
                                        this.tabelDataTB[0].xz = el.samePeriod
                                        this.tabelDataTB[1].xz = el.currentPeriod
                                        this.tabelDataTB[2].xz = this.toNumberR(el.sameRatio)
                                    } else {
                                        this.tabelDataTB[0].ez = el.samePeriod
                                        this.tabelDataTB[1].ez = el.currentPeriod
                                        this.tabelDataTB[2].ez = this.toNumberR(el.sameRatio)
                                    }
                                }
                                this.tabelDataTB.forEach(element => {
                                    element.xzTotal = element.xz + element.ez
                                    element.xzTotal = element.xzTotal.toFixed(2)
                                    element.totalV = element.ivoyage + element.ovoyage
                                    element.totalV = element.totalV.toFixed(2)
                                    element.totalH = element.iheavyTeu +
                                        element.oheavyTeu
                                    element.totalH = element.totalH.toFixed(2)
                                    element.totalH = Number(element.totalH)
                                    element.totalE = element.iemptyTeu +
                                        element.oemptyTeu
                                    element.totalE = element.totalE.toFixed(2)
                                    element.totalE = Number(element.totalE)
                                    element.totalAll = element.totalH + element
                                        .totalE
                                    element.totalAll = element.totalAll.toFixed(2)
                                });
                                this.tabelDataTB[2].xzTotal = this.tabelDataTB[0].xzTotal == 0 || this.tabelDataTB[0].xzTotal == '-' ? 0 : ((this.tabelDataTB[1].xzTotal - this.tabelDataTB[0].xzTotal) / this.tabelDataTB[0].xzTotal) * 100
                                this.tabelDataTB[2].xzTotal = this.tabelDataTB[2].xzTotal.toFixed(2)
                                this.tabelDataTB[2].totalV = this.tabelDataTB[0].totalV == 0 || this.tabelDataTB[0].totalV == '-' ? 0 : ((this.tabelDataTB[1].totalV - this.tabelDataTB[0].totalV) / this.tabelDataTB[0].totalV) * 100
                                this.tabelDataTB[2].totalH = this.tabelDataTB[0].totalH == 0 || this.tabelDataTB[0].totalH == '-' ? 0 : ((this.tabelDataTB[1].totalH - this.tabelDataTB[0].totalH) / this.tabelDataTB[0].totalH) * 100
                                this.tabelDataTB[2].totalE = this.tabelDataTB[0].totalE == 0 || this.tabelDataTB[0].totalE == '-' ? 0 : ((this.tabelDataTB[1].totalE - this.tabelDataTB[0].totalE) / this.tabelDataTB[0].totalE) * 100
                                this.tabelDataTB[2].totalAll = this.tabelDataTB[0].totalAll == 0 || this.tabelDataTB[0].totalAll == '-' ? 0 : ((this.tabelDataTB[1].totalAll - this.tabelDataTB[0].totalAll) / this.tabelDataTB[0].totalAll) * 100
                                this.tabelDataTB[2].totalV = this.tabelDataTB[2].totalV.toFixed(2)
                                this.tabelDataTB[2].totalH = this.tabelDataTB[2].totalH.toFixed(2)
                                this.tabelDataTB[2].totalE = this.tabelDataTB[2].totalE.toFixed(2)
                                this.tabelDataTB[2].totalAll = this.tabelDataTB[2].totalAll.toFixed(2)
                                for (let item in this.tabelDataTB[2]) {
                                    if (this.tabelDataTB[2][item] === 0 || this.tabelDataTB[2][item] === '0.00') {
                                        this.tabelDataTB[2][item] = '-'
                                    }
                                }
                                this.showTB = true
                                this.showTitle = 1
                            })
                        })
                    })
                })
            },
            loadData4() {
                let params = JSON.parse(JSON.stringify(this.condition))
                params.search_IN_portCode = params.search_IN_portCode.join(',')
                getMonthTabRepZXHB(params).then(res => {
                    this.tabelDataTB = [{
                        portName: '上期'
                    }, {
                        portName: '当期'
                    }, {
                        portName: '环比增长率(%)'
                    }]
                    for (let el of res.data.aaData) {
                        if (el.planType === '港内装箱') {
                            this.tabelDataTB[0].total = el.samePeriod
                            this.tabelDataTB[1].total = el.currentPeriod
                            this.tabelDataTB[2].total = this.toNumberR(el.sameRatio)
                        } else {
                            this.tabelDataTB[0].CZtotal = el.samePeriod
                            this.tabelDataTB[1].CZtotal = el.currentPeriod
                            this.tabelDataTB[2].CZtotal = this.toNumberR(el.sameRatio)
                        }
                    }
                    this.tabelDataTB.forEach(element => {
                        element.CZXtotal = element.total + element.CZtotal
                        element.CZXtotal = element.CZXtotal.toFixed(2)
                    });
                    this.tabelDataTB[2].CZXtotal = this.tabelDataTB[0].CZXtotal == 0 || this.tabelDataTB[0].CZXtotal == '-' ? 0 : ((this.tabelDataTB[1].CZXtotal - this.tabelDataTB[0].CZXtotal) / this.tabelDataTB[0].CZXtotal) * 100
                    this.tabelDataTB[2].CZXtotal = this.tabelDataTB[2].CZXtotal.toFixed(2)
                    getMonthTabRepCXHB(params).then(res => {
                        for (let el of res.data.aaData) {
                            if (el.planType === '港内掏箱') {
                                this.tabelDataTB[0].CXgn = el.samePeriod
                                this.tabelDataTB[1].CXgn = el.currentPeriod
                                this.tabelDataTB[2].CXgn = this.toNumberR(el.sameRatio)
                            } else {
                                this.tabelDataTB[0].CXzx = el.samePeriod
                                this.tabelDataTB[1].CXzx = el.currentPeriod
                                this.tabelDataTB[2].CXzx = this.toNumberR(el.sameRatio)
                            }
                        }
                        this.tabelDataTB.forEach(element => {
                            element.CXtotal = element.CXgn + element.CXzx
                            element.CXtotal = element.CXtotal.toFixed(2)
                        });
                        this.tabelDataTB[2].CXtotal = this.tabelDataTB[0].CXtotal == 0 || this.tabelDataTB[0].CXtotal == '-' ? 0 : ((this.tabelDataTB[1].CXtotal - this.tabelDataTB[0].CXtotal) / this.tabelDataTB[0].CXtotal) * 100
                        this.tabelDataTB[2].CXtotal = this.tabelDataTB[2].CXtotal.toFixed(2)
                        getMonthTabRepIOHB(params).then(res => {
                            for (let el of res.data.Import) {
                                if (el.planType === '艘次') {
                                    this.tabelDataTB[0].ivoyage = el.samePeriod
                                    this.tabelDataTB[1].ivoyage = el.currentPeriod
                                    this.tabelDataTB[2].ivoyage = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '重箱') {
                                    this.tabelDataTB[0].iheavyTeu = el.samePeriod
                                    this.tabelDataTB[1].iheavyTeu = el.currentPeriod
                                    this.tabelDataTB[2].iheavyTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '空箱') {
                                    this.tabelDataTB[0].iemptyTeu = el.samePeriod
                                    this.tabelDataTB[1].iemptyTeu = el.currentPeriod
                                    this.tabelDataTB[2].iemptyTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '水转水') {
                                    this.tabelDataTB[0].iwaterTeu = el.samePeriod
                                    this.tabelDataTB[1].iwaterTeu = el.currentPeriod
                                    this.tabelDataTB[2].iwaterTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '非水转水') {
                                    this.tabelDataTB[0].inoWaterTeu = el.samePeriod
                                    this.tabelDataTB[1].inoWaterTeu = el.currentPeriod
                                    this.tabelDataTB[2].inoWaterTeu = this.toNumberR(el.sameRatio)
                                }
                            }
                            this.tabelDataTB.forEach(element => {
                                element.iTotal = element.iheavyTeu + element.iemptyTeu
                                element.iTotal = element.iTotal.toFixed(2)
                            });
                            this.tabelDataTB[2].iTotal = this.tabelDataTB[0].iTotal == 0 || this.tabelDataTB[0].iTotal == '-' ? 0 : ((this.tabelDataTB[1].iTotal - this.tabelDataTB[0].iTotal) / this.tabelDataTB[0].iTotal) * 100
                            this.tabelDataTB[2].iTotal = this.tabelDataTB[2].iTotal.toFixed(2)
                            for (let el of res.data.Export) {
                                if (el.planType === '艘次') {
                                    this.tabelDataTB[0].ovoyage = el.samePeriod
                                    this.tabelDataTB[1].ovoyage = el.currentPeriod
                                    this.tabelDataTB[2].ovoyage = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '重箱') {
                                    this.tabelDataTB[0].oheavyTeu = el.samePeriod
                                    this.tabelDataTB[1].oheavyTeu = el.currentPeriod
                                    this.tabelDataTB[2].oheavyTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '空箱') {
                                    this.tabelDataTB[0].oemptyTeu = el.samePeriod
                                    this.tabelDataTB[1].oemptyTeu = el.currentPeriod
                                    this.tabelDataTB[2].oemptyTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '水转水') {
                                    this.tabelDataTB[0].owaterTeu = el.samePeriod
                                    this.tabelDataTB[1].owaterTeu = el.currentPeriod
                                    this.tabelDataTB[2].owaterTeu = this.toNumberR(el.sameRatio)
                                } else if (el.planType === '非水转水') {
                                    this.tabelDataTB[0].onoWaterTeu = el.samePeriod
                                    this.tabelDataTB[1].onoWaterTeu = el.currentPeriod
                                    this.tabelDataTB[2].onoWaterTeu = this.toNumberR(el.sameRatio)
                                }
                            }
                            this.tabelDataTB.forEach(element => {
                                element.oTotal = element.oemptyTeu + element.oheavyTeu
                                element.oTotal = element.oTotal.toFixed(2)
                            });
                            this.tabelDataTB[2].oTotal = this.tabelDataTB[0].oTotal == 0 || this.tabelDataTB[0].oTotal == '-' ? 0 : ((this.tabelDataTB[1].oTotal - this.tabelDataTB[0].oTotal) / this.tabelDataTB[0].oTotal) * 100
                            this.tabelDataTB[2].oTotal = this.tabelDataTB[2].oTotal.toFixed(2)
                            getMonthTabRepSPHB(params).then(res => {
                                for (let el of res.data.aaData) {
                                    if (el.planType === '熏蒸') {
                                        this.tabelDataTB[0].xz = el.samePeriod
                                        this.tabelDataTB[1].xz = el.currentPeriod
                                        this.tabelDataTB[2].xz = this.toNumberR(el.sameRatio)
                                    } else {
                                        this.tabelDataTB[0].ez = el.samePeriod
                                        this.tabelDataTB[1].ez = el.currentPeriod
                                        this.tabelDataTB[2].ez = this.toNumberR(el.sameRatio)
                                    }
                                }
                                this.tabelDataTB.forEach(element => {
                                    element.xzTotal = element.xz + element.ez
                                    element.xzTotal = element.xzTotal.toFixed(2)
                                    element.totalV = element.ivoyage + element.ovoyage
                                    element.totalV = element.totalV.toFixed(2)
                                    element.totalH = element.iheavyTeu +
                                        element.oheavyTeu
                                    element.totalH = element.totalH.toFixed(2)
                                    element.totalH = Number(element.totalH)
                                    element.totalE = element.iemptyTeu +
                                        element.oemptyTeu
                                    element.totalE = element.totalE.toFixed(2)
                                    element.totalE = Number(element.totalE)
                                    element.totalAll = element.totalH + element
                                        .totalE
                                    element.totalAll = element.totalAll.toFixed(2)
                                });
                                this.tabelDataTB[2].xzTotal = this.tabelDataTB[0].xzTotal == 0 || this.tabelDataTB[0].xzTotal == '-' ? 0 : ((this.tabelDataTB[1].xzTotal - this.tabelDataTB[0].xzTotal) / this.tabelDataTB[0].xzTotal) * 100
                                this.tabelDataTB[2].xzTotal = this.tabelDataTB[2].xzTotal.toFixed(2)
                                this.tabelDataTB[2].totalV = this.tabelDataTB[0].totalV == 0 || this.tabelDataTB[0].totalV == '-' ? 0 : ((this.tabelDataTB[1].totalV - this.tabelDataTB[0].totalV) / this.tabelDataTB[0].totalV) * 100
                                this.tabelDataTB[2].totalH = this.tabelDataTB[0].totalH == 0 || this.tabelDataTB[0].totalH == '-' ? 0 : ((this.tabelDataTB[1].totalH - this.tabelDataTB[0].totalH) / this.tabelDataTB[0].totalH) * 100
                                this.tabelDataTB[2].totalE = this.tabelDataTB[0].totalE == 0 || this.tabelDataTB[0].totalE == '-' ? 0 : ((this.tabelDataTB[1].totalE - this.tabelDataTB[0].totalE) / this.tabelDataTB[0].totalE) * 100
                                this.tabelDataTB[2].totalAll = this.tabelDataTB[0].totalAll == 0 || this.tabelDataTB[0].totalAll == '-' ? 0 : ((this.tabelDataTB[1].totalAll - this.tabelDataTB[0].totalAll) / this.tabelDataTB[0].totalAll) * 100
                                this.tabelDataTB[2].totalV = this.tabelDataTB[2].totalV.toFixed(2)
                                this.tabelDataTB[2].totalH = this.tabelDataTB[2].totalH.toFixed(2)
                                this.tabelDataTB[2].totalE = this.tabelDataTB[2].totalE.toFixed(2)
                                this.tabelDataTB[2].totalAll = this.tabelDataTB[2].totalAll.toFixed(2)
                                for (let item in this.tabelDataTB[2]) {
                                    if (this.tabelDataTB[2][item] === 0 || this.tabelDataTB[2][item] === '0.00') {
                                        this.tabelDataTB[2][item] = '-'
                                    }
                                }
                                this.showTB = true
                                this.showTitle = 2
                            })
                        })
                    })
                })
            },
            check() {
                if (this.showMonthTable = true){
                    this.toPicNew();
                } else {
                    if (this.isPic === 1) {
                        this.showTable = false
                        this.loadData()
                    } else {
                        this.showPic = false
                        this.startTime = this.condition.search_GTE_dateTime
                        this.endTime = this.condition.search_LTE_dateTime
                        if (this.startTime.substr(0,7) === this.endTime.substr(0,7)){
                            this.factShowTime = new Date(this.startTime).getFullYear()+"年"+(new Date(this.startTime).getMonth()+1)+"月"
                        } else {
                            this.factShowTime = new Date(this.startTime).getFullYear()+"年"+(new Date(this.startTime).getMonth()+1)+"月"+'至'+new Date(this.endTime).getFullYear()+"年"+(new Date(this.endTime).getMonth()+1)+"月"
                        }
                        this.loadData2()
                    }
                }
            },
            changeport() {
                this.portName = []
                this.condition.search_IN_portCode.forEach(element => {
                    this.portName.push(portCode.get(element))
                });
            },
            toPicNew(){
                this.showMonthTable = true
                this.showTable = false
                this.showPic = false
                let params = JSON.parse(JSON.stringify(this.condition))
                params.search_IN_portCode = params.search_IN_portCode.join(',')
                getMonthShipNameReport(params).then(res => {
                    let returnList = res.data.aaData
                    if (returnList != null && returnList.length > 0){
                        let monthTeu = 0
                        let monthOne = 0
                        let monthTwo = 0
                        let monthThree = 0
                        let totalTeu = 0
                        let totalOne = 0
                        let totalTwo = 0
                        let totalThree = 0
                        returnList.forEach((item, index) => {
                            monthTeu = monthTeu + Number(item.monthTue==null?0:item.monthTue)
                            monthOne = monthOne + Number(item.monthStage==null?0:item.monthStage)
                            monthTwo = monthTwo + Number(item.monthCompare == null?0:item.monthCompare)
                            monthThree = monthThree + Number(item.monthRingTeu == null?0:item.monthRingTeu)
                            totalTeu = totalTeu + Number(item.totalTue == null ? 0 : item.totalTue)
                            totalOne = totalOne + Number(item.totalStage == null ? 0 : item.totalStage)
                            totalTwo = totalTwo + Number(item.totalCompare == null ? 0 : item.totalCompare)
                            totalThree = totalThree + Number(item.totalRingTeu == null ? 0 : item.totalRingTeu)
                        })
                        returnList.push({
                            accountUnit : '合计',
                            monthTue : monthTeu,
                            monthStage : monthOne,
                            monthCompare : Number(monthTwo) > 0 ? (Number(monthTeu)/Number(monthOne)) : 0,
                            monthRing : Number(monthThree) > 0 ? (Number(monthTeu)/Number(monthThree)) : 0,
                            totalTue : totalTeu,
                            totalStage : totalOne,
                            totalCompare : Number(totalTwo) > 0 ? (Number(totalTeu)/Number(totalTwo)) : 0,
                            totalRing : Number(totalThree) > 0 ? (Number(totalTeu)/Number(totalThree)) : 0,
                        })
                    }
                    this.$nextTick(() => {
                        this.monthShipNameList = returnList
                    })
                })
            },
            toPic(x) {
                this.isPic = x
                if (this.isPic === 1) {
                    this.showMonthTable = false
                    this.showTable = false
                    this.loadData()
                } else {
                    this.showPic = false
                    this.showMonthTable = false
                    this.startTime = this.condition.search_GTE_dateTime
                    this.endTime = this.condition.search_LTE_dateTime
                    if (this.startTime.substr(0,7) === this.endTime.substr(0,7)){
                        this.factShowTime = new Date(this.startTime).getFullYear()+"年"+(new Date(this.startTime).getMonth()+1)+"月"
                    } else {
                        this.factShowTime = new Date(this.startTime).getFullYear()+"年"+(new Date(this.startTime).getMonth()+1)+"月"+'至'+new Date(this.endTime).getFullYear()+"年"+(new Date(this.endTime).getMonth()+1)+"月"
                    }
                    this.loadData2()
                }
            },
            print(router) {
                window.localStorage.MonthReportCondition = JSON.stringify(this.condition)
                window.localStorage.MonthReportPortName = JSON.stringify(this.portName)
                const origin = window.location.origin + window.location.pathname
                const route = `#/${router}/`
                window.open(`${origin}${route}`);
            },
            isTable(val) {
                switch (val) {
                    case 'left1':
                        this.left1 = !this.left1
                        if (this.left1) {
                            this.$nextTick(() => {
                                this.inintPieF()
                            })
                        }
                        break
                    case 'left2':
                        this.left2 = !this.left2
                        if (this.left2) {
                            this.$nextTick(() => {
                                this.initLineF()
                            })
                        }
                        break
                    case 'left3':
                        this.left3 = !this.left3
                        if (this.left3) {
                            this.$nextTick(() => {
                                this.initLineS()
                            })
                        }
                        break
                    case 'right1':
                        this.right1 = !this.right1
                        if (this.right1) {
                            this.$nextTick(() => {
                                this.inintPieS()
                            })
                        }
                        break
                    case 'right2':
                        this.right2 = !this.right2
                        if (this.right2) {
                            this.$nextTick(() => {
                                this.initLineT()
                            })
                        }
                        break
                    case 'right3':
                        this.right3 = !this.right3
                        if (this.right3) {
                            this.$nextTick(() => {
                                this.initLineFour()
                            })
                        }
                        break
                }
            },
            inintPieF() {
                if (document.getElementById('pieF')) {
                    const myChart = echarts.init(document.getElementById('pieF'))
                    let inDate = this.left1Data.in
                    let outDate = this.left1Data.out
                    const option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                return [params.data.val + '<br/>  ' + params.name + ': ' + params.data.value +
                                ' (' +
                                params.percent + '%) '
                                ]
                            },
                        },
                        series: [{
                            name: '访问来源',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: [0, '30%'],
                            center: ['50%', '40%'],
                            label: {
                                normal: {
                                    position: 'inner',
                                    fontSize: 14
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: inDate,
                            tooltip: {
                                trigger: 'item',
                                formatter: function (params) {
                                    return [params.data.val + '<br/>  ' + params.name + ': ' + params.data
                                        .value +
                                    ' (' +
                                    params.percent + '%) '
                                    ]
                                },
                            }
                        },
                            {
                                name: '111',
                                type: 'pie',
                                radius: ['40%', '55%'],
                                center: ['50%', '40%'],
                                label: {
                                    normal: {
                                        formatter: function (params) {
                                            return ['{a|' + params.data.val + '}\n{hr|}\n  {b|' + params.name +
                                            ': ' + params.data.value + ' (' + params.percent +
                                            '%)} '
                                            ]
                                        },
                                        backgroundColor: '#eee',
                                        borderColor: '#aaa',
                                        borderWidth: 1,
                                        borderRadius: 4,
                                        rich: {
                                            a: {
                                                fontSize: 14,
                                                color: '#999',
                                                lineHeight: 22,
                                                align: 'left',
                                                padding: [1, 1, 1, 6]
                                            },
                                            hr: {
                                                borderColor: '#aaa',
                                                width: '100%',
                                                borderWidth: 0.5,
                                                height: 0
                                            },
                                            b: {
                                                fontSize: 14,
                                                lineHeight: 22
                                            }
                                        }
                                    }
                                },
                                data: outDate,
                                tooltip: {
                                    trigger: 'item',
                                    formatter: function (params) {
                                        return [params.data.val + '<br/>  ' + params.name + ': ' + params.data
                                            .value +
                                        ' (' +
                                        params.percent + '%) '
                                        ]
                                    },
                                }
                            }
                        ]
                    }
                    myChart.setOption(option, true)
                }

            },
            inintPieS() {
                if (document.getElementById('pieS')) {
                    const myChartPieS = echarts.init(document.getElementById('pieS'))
                    let inDate = this.right1Data.in
                    let outDate = this.right1Data.out
                    const optionPie = {
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                return [params.data.val + '<br/>  ' + params.name + ': ' + params.data.value +
                                ' (' +
                                params.percent + '%) '
                                ]
                            },
                        },
                        series: [{
                            name: '访问来源',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: [0, '30%'],
                            center: ['50%', '40%'],
                            label: {
                                normal: {
                                    position: 'inner',
                                    fontSize: 14
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: inDate
                        },
                            {
                                name: '111',
                                type: 'pie',
                                radius: ['40%', '55%'],
                                center: ['50%', '40%'],
                                label: {
                                    normal: {
                                        formatter: function (params) {
                                            return ['{a|' + params.data.val + '}\n{hr|}\n  {b|' + params.name +
                                            ': ' + params.data.value + ' (' + params.percent +
                                            '%)} '
                                            ]
                                        },
                                        backgroundColor: '#eee',
                                        borderColor: '#aaa',
                                        borderWidth: 1,
                                        borderRadius: 4,
                                        rich: {
                                            a: {
                                                fontSize: 14,
                                                color: '#999',
                                                lineHeight: 22,
                                                align: 'left',
                                                padding: [1, 1, 1, 6]
                                            },
                                            hr: {
                                                borderColor: '#aaa',
                                                width: '100%',
                                                borderWidth: 0.5,
                                                height: 0
                                            },
                                            b: {
                                                fontSize: 14,
                                                lineHeight: 22
                                            }
                                        }
                                    }
                                },
                                data: outDate
                            }
                        ]
                    }
                    myChartPieS.setOption(optionPie, true)
                }
            },
            initLineF() {
                if (document.getElementById('linF')) {
                    const myChartBar = echarts.init(document.getElementById('linF'))
                    const data = this.left2Data
                    const option3 = {
                        title: [{
                            text: "各港口空重理箱图",
                            left: 'center',
                            textStyle: {}
                        }, {
                            text: '单位：TEU',
                            left: 10,
                            textStyle: {
                                color: "#cccccc",
                                fontSize: 12,
                                fontWeight: 'normal'
                            }
                        }],
                        tooltip: {},
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '10%',
                            containLabel: true
                        },
                        legend: {
                            bottom: 0,
                            data: ['理重', '理空'],
                            textStyle: {
                                fontSize: '14'
                            }
                        },
                        xAxis: [{
                            type: 'category',
                            data: data.stations,
                            axisLabel: {
                                color: '#cccccc'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#cccccc',
                                }
                            },
                            axisTick: {
                                alignWithLabel: true
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            axisLine: {
                                show: true
                            },
                            axisLabel: {
                                color: '#cccccc'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#cccccc'
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        }],
                        series: [{
                            name: '理重',
                            type: 'bar',
                            itemStyle: {
                                color: '#29b5e6'
                            },
                            barGap: '30%',
                            barWidth: '30px',
                            data: data.ups
                        },
                            {
                                name: '理空',
                                type: 'bar',
                                itemStyle: {
                                    color: '#f55260'
                                },
                                barWidth: '30px',
                                data: data.downs
                            }
                        ]
                    }
                    myChartBar.setOption(option3, true)
                }
            },
            initLineS() {
                if (document.getElementById('linS')) {
                    const myChartS = echarts.init(document.getElementById('linS'))
                    let data = this.left3Data
                    const option4 = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        title: [{
                            text: "进出口空重箱环比,同比图",
                            left: 'center',
                            textStyle: {
                                // color: "#454545",
                                // fontSize: 16,
                                // fontWeight: 'bold'
                            }
                        }, {
                            text: '单位：TEU',
                            left: 10,
                            textStyle: {
                                color: "#cccccc",
                                fontSize: 12,
                                fontWeight: 'normal'
                            }
                        }],
                        legend: {
                            bottom: 0,
                            data: ['上期', '当期', '同期', '环比', '同比']
                        },
                        xAxis: [{
                            type: 'category',
                            data: ['进口空箱', '进口重箱', '出口空箱', '出口重箱'],
                            axisLabel: {
                                color: '#cccccc'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#cccccc',
                                }
                            },
                            axisPointer: {
                                type: 'shadow'
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            show: true,
                            axisLabel: {
                                color: '#cccccc'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#cccccc'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                            {
                                type: 'value',
                                axisLabel: {
                                    color: '#cccccc',
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#cccccc'
                                    }
                                },
                                axisLabel: {
                                    formatter: '{value} %'
                                },
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                }
                            }
                        ],
                        series: [{
                            name: '上期',
                            type: 'bar',
                            itemStyle: {
                                color: '#29b5e6'
                            },
                            data: data.up
                        },
                            {
                                name: '当期',
                                type: 'bar',
                                itemStyle: {
                                    color: '#f55260'
                                },
                                data: data.now
                            },
                            {
                                name: '同期',
                                type: 'bar',
                                itemStyle: {
                                    color: '#6dc989'
                                },
                                data: data.sp
                            },
                            {
                                name: '环比',
                                type: 'line',
                                yAxisIndex: 1,
                                itemStyle: {
                                    color: '#ffa566'
                                },
                                data: data.cr
                            },
                            {
                                name: '同比',
                                type: 'line',
                                yAxisIndex: 1,
                                itemStyle: {
                                    color: '#1685ab'
                                },
                                data: data.sr
                            }
                        ]
                    };
                    myChartS.setOption(option4, true)
                }
            },
            initLineT() {
                if (document.getElementById('linT')) {
                    const myChartT = echarts.init(document.getElementById('linT'))
                    const data = this.right2Data
                    const option5 = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        title: [{
                            text: "艘次环比,同比图",
                            left: 'center',
                            textStyle: {
                                // color: "#454545",
                                // fontSize: 16,
                                // fontWeight: 'bold'
                            }
                        }, {
                            text: '单位：艘次',
                            left: 10,
                            textStyle: {
                                color: "#cccccc",
                                fontSize: 12,
                                fontWeight: 'normal'
                            }
                        }],
                        legend: {
                            bottom: 0,
                            data: ['上期', '当期', '同期', '环比', '同比']
                        },
                        xAxis: [{
                            type: 'category',
                            data: ['进口', '出口'],
                            axisLabel: {
                                color: '#cccccc'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#cccccc',
                                }
                            },
                            axisPointer: {
                                type: 'shadow'
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            show: true,
                            axisLabel: {
                                color: '#cccccc'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#cccccc'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                            {
                                type: 'value',
                                axisLabel: {
                                    color: '#cccccc',
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#cccccc'
                                    }
                                },
                                axisLabel: {
                                    formatter: '{value} %'
                                },
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                }
                            }
                        ],
                        series: [{
                            name: '上期',
                            type: 'bar',
                            itemStyle: {
                                color: '#29b5e6'
                            },
                            data: data.up
                        },
                            {
                                name: '当期',
                                type: 'bar',
                                itemStyle: {
                                    color: '#f55260'
                                },
                                data: data.now
                            },
                            {
                                name: '同期',
                                type: 'bar',
                                itemStyle: {
                                    color: '#6dc989'
                                },
                                data: data.sp
                            },
                            {
                                name: '环比',
                                type: 'line',
                                yAxisIndex: 1,
                                itemStyle: {
                                    color: '#ffa566'
                                },
                                data: data.cr
                            },
                            {
                                name: '同比',
                                type: 'line',
                                yAxisIndex: 1,
                                itemStyle: {
                                    color: '#1685ab'
                                },
                                data: data.sr
                            }
                        ]
                    };
                    myChartT.setOption(option5, true)
                }
            },
            initLineFour() {
                if (document.getElementById('linFour')) {
                    const myChartFF = echarts.init(document.getElementById('linFour'))
                    const dataF = this.right3Data
                    const option6 = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        title: [{
                            text: "各港口空重理箱图",
                            left: 'center',
                            textStyle: {
                                // color: "#454545",
                                // fontSize: 16,
                                // fontWeight: 'bold'
                            }
                        }, {
                            text: '单位：TEU',
                            left: 10,
                            textStyle: {
                                color: "#cccccc",
                                fontSize: 12,
                                fontWeight: 'normal'
                            }
                        }],
                        legend: {
                            bottom: 0,
                            data: ['上期', '当期', '同期', '环比', '同比']
                        },
                        xAxis: [{
                            type: 'category',
                            data: ['港内装箱', '厂外装箱', '港内掏箱', '整箱提运'],
                            axisLabel: {
                                color: '#cccccc'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#cccccc',
                                }
                            },
                            axisPointer: {
                                type: 'shadow'
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            show: true,
                            axisLabel: {
                                color: '#cccccc'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#cccccc'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                            {
                                type: 'value',
                                axisLabel: {
                                    color: '#cccccc',
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#cccccc'
                                    }
                                },
                                axisLabel: {
                                    formatter: '{value} %'
                                },
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                }
                            }
                        ],
                        series: [{
                            name: '上期',
                            type: 'bar',
                            itemStyle: {
                                color: '#29b5e6'
                            },
                            data: dataF.up
                        },
                            {
                                name: '当期',
                                type: 'bar',
                                itemStyle: {
                                    color: '#f55260'
                                },
                                data: dataF.now
                            },
                            {
                                name: '同期',
                                type: 'bar',
                                itemStyle: {
                                    color: '#6dc989'
                                },
                                data: dataF.sp
                            },
                            {
                                name: '环比',
                                type: 'line',
                                yAxisIndex: 1,
                                itemStyle: {
                                    color: '#ffa566'
                                },
                                data: dataF.cr
                            },
                            {
                                name: '同比',
                                type: 'line',
                                yAxisIndex: 1,
                                itemStyle: {
                                    color: '#1685ab'
                                },
                                data: dataF.sr
                            }
                        ]
                    };
                    myChartFF.setOption(option6, true)
                }
            },
            toExcel() {
              let title = this.factShowTime + '船代统计报表'
              var table2excel = new Table2Excel(document.getElementsByClassName('ceshi'),{
                    plugins:[
                        Table2Excel.plugins.alignmentPlugin,
                        Table2Excel.plugins.hyperlinkPlugin,
                        {
                            workcellCreated({
                                workbook,
                                tables,
                                worksheet,
                                table,
                                workcell,
                                cell,
                                cellStyle,
                                rowRange,
                                colRange
                            }) {
                                // 单元格边框
                                workcell.border = {
                                    top: {
                                        style: 'thin'
                                    },
                                    left: {
                                        style: 'thin'
                                    },
                                    bottom: {
                                        style: 'thin'
                                    },
                                    right: {
                                        style: 'thin'
                                    }
                                };
                            }
                        }
                    ]
                })
              table2excel.export(title, 'xlsx');
            },
            toDecimal(x) {
                var f = Math.round(x * 1000) / 1000;
                var s = f.toString();
                return s;
            }
        }

    }

</script>
<style lang="scss" scoped>
    .z-alert {
        font-size: 13px;
        background: #e8f8fe;
        border: 1px solid #a3dcff;
        // height: 32px;
        line-height: 32px;
        width: 100%;
        // max-width: 1066px;
        padding-left: 3px;
        letter-spacing: 0.5px;
    }

    .content {
        width: 100%;

        .content-c {
            width: 49%;
            display: inline-block;
        }

        .con-t {
            margin-top: 20px;
        }

        .content-lf {
            height: 385px;
        }

        .content-m {
            height: 240px;
        }

        .content-d {
            height: 280px;
        }
    }

    .to-center {
        margin: 20px auto;
    }

    .span-line {
        position: relative;
        padding-left: 15px;
        font-size: 16px;
        font-weight: 600;
        float: left;
    }

    .span-line:before {
        content: "";
        position: absolute;
        background: #409eff;
        width: 5px;
        height: 69%;
        left: 0px;
        top: 20%;
    }

    .content-t {
        width: 100%;
        height: 400px;
        border: 1px solid #dddddd;
        margin-top: 41px;
    }

    .content-mar {
        margin-top: 0;
    }

    .ship-dea {
        font-size: 14px;
        margin-top: 20px;
        width: 100%;

        .dea-ul {
            // display: inline-block;
            text-align: center;
            width: 80%;
            display: inline-block;
            letter-spacing: -8px;

            li {
                display: inline-block;
                width: 33.3%;
                letter-spacing: normal;

                .dea-num {
                    color: #3399ff;
                    font-weight: bold;
                    font-style: normal;
                }
            }

            .dea-bor {
                float: left;
                // color: #409eff;
                line-height: 17px;
                font-size: 10px;
                // width: 2px;
                // height: 12px;
                // margin-top: 3px;
            }
        }
    }

    .ship-gre {
        background: #fff;
        border-color: #dddddd;
        color: #666;
    }

    .danw {
        color: #cccccc;
        font-size: 13px;
    }

    .bot-tab {
        border: 1px solid #ccc;
        text-align: center;
        border-collapse: collapse;
        font-size: 14px;
        width: 100%;
        margin-top: 20px;

        tr,
        tr td {
            border: 1px solid #ccc;
        }

        tr {
            height: 36px;
        }

        td {
            font-weight: bold;
            background: #f7f7f7;

            i {
                font-style: normal;
                color: #29b5e6;
            }
        }
    }

    .table-pos {
        position: absolute;
        right: 20px;
        z-index: 10;
    }

    .all-tab tr td {
        border: 1px solid #18191a;
        text-align: center;
    }

    .all-tab {
        border-collapse: collapse;
        width: 1100px;
        margin: 20px auto;
        margin-top: 0;
        tr {
            height: 40px;
            font-size: 14px;
        }
    }

    .tb-ul {
        display: inline-block;
        letter-spacing: -8px;
        width: 1100px;
        margin: 10px 30px;
        margin-bottom: 0;

        li {
            display: inline-block;
            // width: 33.3%;
            letter-spacing: normal;

        }
    }

    .td-bg {
        background: #f1faff;
        font-weight: bold;
    }

    .td-bg2 {
        background: #fafafa;
    }

    .title-font {
        color: #409EFF;
        font-size: 13px;
    }
</style>
